<!--广告列表-->
<template>
  <div class="advertiseList">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button size="mini" @click="addAdvertise" style="margin-left:20px">添加广告</el-button>
      </div>
       <el-table
         :data="adsList"
         border
         style="width: 100%">
         <el-table-column
           align=center
           label="编号"
           type="index"
           width="80">
         </el-table-column>
         <el-table-column
           align=center
           prop="name"
           label="广告名称">
         </el-table-column>
         <el-table-column
           align=center
           label="广告位置">
           <template slot-scope="scope">
             <span>{{scope.row.spaceId | getAdSpace}}</span>
           </template>
         </el-table-column>
         <el-table-column
           align=center
           label="广告图片"
           width="120px">
           <template slot-scope="scope">
              <el-image :src="scope.row.img">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
           </template>
         </el-table-column>
         <el-table-column
           align=center
           label="时间">
           <template slot-scope="scope">
            <span>{{scope.row.startTime | timeFilter }}</span>
          </template>
         </el-table-column>
         <el-table-column
           align=center
           label="上线/下线">
           <template slot-scope="scope">
             <el-switch
               v-model="scope.row.status"
               active-color="#40586f"
               inactive-color="#dcdfe6"
               :active-value="1"
               :inactive-value="0"
               @change="getAdsStatus(scope.row.status, scope.row.id)">
             </el-switch>
           </template>
         </el-table-column>
         <el-table-column
           align=center
           fixed="right"
           label="操作"
           width="60px">
           <template slot-scope="scope">
             <el-button @click="advertiseEdit(scope.row.id)" type="text" size="small">编辑</el-button>
           </template>
         </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getAdList, getAllSpaces, getAdsStatus } from '@/services/ad'
let that
export default {
  name: 'advertiseList',
  data () {
    return {
      // 广告列表
      adsList: [],
      // 广告位列表
      adsSpace: []
    }
  },
  beforeCreate () {
    that = this
  },
  created () {
    this.getAdList()
    this.getAllSpaces()
  },
  methods: {
    async getAdList () {
      const { data } = await getAdList()
      if (data.state === 1) {
        this.adsList = data.content
      }
    },
    async getAllSpaces () {
      const { data } = await getAllSpaces()
      if (data.state === 1) {
        this.adsSpace = data.content
      }
    },
    getAdsStatus (val, id) {
      var obj = {
        status: val,
        id
      }
      this.$confirm('是否要修改上线/下线状态', '提示')
        .then(async () => {
          const { data } = await getAdsStatus(obj)
          if (data.state === 1) {
            this.$message.success('状态更新成功!')
          }
        }).catch(() => {
          this.$message.success('取消状态更新')
          this.getAdList()
        })
    },
    // 添加广告
    addAdvertise () {
      this.$router.push({ name: 'addAdvertise' })
    },
    // 编辑广告
    advertiseEdit (id) {
      this.$router.push({ name: 'addAdvertiseDetil', params: { id } })
    }
  },
  filters: {
    timeFilter (val) {
      function time (value) {
        if (value < 10) {
          return '0' + value
        }
        return value
      }
      const date = new Date(val)
      return `
        ${date.getFullYear()}-${time(date.getMonth() + 1)}-${time(date.getDate())}
        ${time(date.getHours())}:${time(date.getMinutes())}:${time(date.getSeconds())}
      `
    },
    getAdSpace (val) {
      // vue中的filters过滤器this指向并不是vue 中的this，而是undefined，
      // 要指向this获取vue的data数据
      // 首先,在最外面声明let that;
      // 其次在beforeCreate () { that = this },
      that.adsSpace.map(item => {
        if (item.id === val) {
          val = item.name
        }
      })
      return val
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-card__body{
  padding: 20px 0 !important;
}
.el-table{
  margin-top: 20px !important;
}
.el-image{
  ::v-deep .el-image__inner{
    height: 90px !important;
  }
}
</style>
